<!DOCTYPE html>
<html lang="en">
<head>
    <% include head.ejs %>
    <link rel="stylesheet" href="/form/css/formValidation.css"/>
</head>

<body>

<!-- **********************************************************************************************************************************************************
MAIN CONTENT
*********************************************************************************************************************************************************** -->

<div id="login-page">
    <div class="container">

        <div class="form-login">
            <h2 class="form-login-heading">登录</h2>

            <div class="login-wrap">
                <form id="form-login" method="post" action="/admin/login">
                <div class="form-group">
                    <input type="text" name="username" class="form-control" placeholder="用户名" autofocus>
                </div>
                <br>
                <div class="form-group">
                <input type="password" name="password" class="form-control" placeholder="密码">
                </div>

                <label class="checkbox">
		                <span class="pull-right">
		                    <a data-toggle="modal" href="login.html#myModal">忘记密码?</a>
		                </span>
                </label>
                <button id="btn-login-commit" class="btn btn-theme btn-block" type="submit"><i class="fa fa-lock"></i>
                    登录
                </button>
                    </form>
                <hr>

                <div class="login-social-link centered">
                </div>
                <div class="registration">
                    还没有账号？<br/>
                    <a data-toggle="modal" href="login.html#registerModal">
                        注册一个
                    </a>
                </div>

            </div>

        </div>
        <!-- Modal -->
        <div aria-hidden="true" aria-labelledby="myModalLabe2" role="dialog" tabindex="-1" id="registerModal"
             class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title">注册账号</h4>
                    </div>
                    <form id="form-register" method="post" action="/admin/register">
                        <div class="modal-body">
                            <p>填写账号</p>
                            <div class="form-group">
                            <input type="text" name="username" placeholder="用户名" autocomplete="off"
                                   class="form-control placeholder-no-fix">
                                </div>

                            <div class="form-group">
                            <input type="password" name="password" placeholder="密码" autocomplete="off"
                                   class="form-control placeholder-no-fix">
                                </div>

                            <div class="form-group">
                            <input type="password" name="again" placeholder="确认密码" autocomplete="off"
                                   class="form-control placeholder-no-fix">
                                </div>


                            <div class="form-group">
                            <input type="text" name="nicename" placeholder="昵称" autocomplete="off"
                                   class="form-control placeholder-no-fix">
                                </div>

                            <div class="form-group">
                            <input type="text" name="email" placeholder="邮箱" autocomplete="off"
                                   class="form-control placeholder-no-fix">
                                </div>

                            <div class="form-group">
                                <input type="text" name="key" placeholder="邀请码" autocomplete="off"
                                       class="form-control placeholder-no-fix">
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button data-dismiss="modal" class="btn btn-default" type="button">取消</button>
                            <button id="btn-register-commit" class="btn btn-theme" type="submit">确认</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <!-- modal -->
        <!-- Modal -->
        <div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="myModal"
             class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title">Forgot Password ?</h4>
                    </div>
                    <div class="modal-body">
                        <p>Enter your e-mail address below to reset your password.</p>
                        <input type="text" name="email" placeholder="Email" autocomplete="off"
                               class="form-control placeholder-no-fix">

                    </div>
                    <div class="modal-footer">
                        <button data-dismiss="modal" class="btn btn-default" type="button">Cancel</button>
                        <button class="btn btn-theme" type="button">Submit</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- modal -->


    </div>
</div>

<!-- js placed at the end of the document so the pages load faster -->
<script src="/assets/js/jquery.js"></script>
<script src="/js/vendor/bootstrap.min.js"></script>

<!-- 使低版本IE支持placeholder -->
<!--[if lt IE 9]>
<script src="/js/vendor/jquery.placeholder.min.js"></script>
<script >
    $('input, textarea').placeholder();
</script>
<![endif]-->
<script src="/js/vendor/waitMe.min.js"></script>
<!--BACKSTRETCH-->
<!-- You can use an image of whatever size. This script will stretch to fit in any screen size.-->
<script type="text/javascript" src="/assets/js/jquery.backstretch.min.js"></script>


<script>
    $.backstretch("/assets/img/login-bg.jpg", {speed: 500});
</script>

</body>

<!--表单验证插件-->
<script type="text/javascript" src="/form/js/formValidation.js"></script>
<script type="text/javascript" src="/form/js/framework/bootstrap.js"></script>
<script type="text/javascript" src="/form/js/language/zh_CN.js"></script>
<script>
    $(function () {

        function showLoading(element, effect) {

            $(element).waitMe({
                effect: effect,
                text: '',
                bg: 'rgba(255,255,255,0.6)',
                color: '#000'
            });

        }

         $('#form-login').formValidation({
            message: '未通过验证',
            icon: {
                valid: 'fa fa-check fa-2x',
                invalid: 'fa fa-times fa-2x',
                validating: 'fa fa-refresh fa-2x'
            },
            fields: {
                username: {
                    message: '用户名无效',
                    validators: {
                        notEmpty: {
                            message: '不能为空'
                        },
                        stringLength: {
                            min: 1,
                            max: 20,
                            message: '长度仅能为1-20'
                        },
                        regexp: {
                            regexp: /^[A-Za-z0-9_]+$/,
                            message: '含有特殊字符(仅能为字母、数字、下划线)'
                        }
                    }
                },
                password: {
                    message: '密码无效',
                    validators: {
                        notEmpty: {
                            message: '不能为空'
                        }
                    }
                }
            }
        })
                .on('success.form.fv', function (e) {
                     showLoading('.login-wrap', 'win8_linear');
                });

        $('#form-register').formValidation({
            message: '未通过验证',
            icon: {
                valid: 'fa fa-check fa-2x',
                invalid: 'fa fa-times fa-2x',
                validating: 'fa fa-refresh fa-2x'
            },
            fields: {
                username: {
                    message: '用户名无效',
                    validators: {
                        notEmpty: {
                            message: '不能为空'
                        },
                        stringLength: {
                            min: 1,
                            max: 30,
                            message: '长度仅能为1-20'
                        },
                        regexp: {
                            regexp: /^[A-Za-z0-9_]+$/,
                            message: '含有特殊字符(仅能为字母、数字、下划线)'
                        }
                    }
                },
                password: {
                    message: '备注无效',
                    validators: {
                        notEmpty: {
                            message: '不能为空'
                        }
                    }
                },
                again: {
                    message: '确认密码失败',
                    validators: {
                        notEmpty: {
                            message: '不能为空'
                        },
                        identical: {
                            field: 'password',
                            message: '两次密码不同'
                        }
                    }
                },
                nicename: {
                    message: '昵称无效',
                    validators: {
                        notEmpty: {
                            message: '不能为空'
                        },
                        stringLength: {
                            min: 1,
                            max: 20,
                            message: '长度仅能为1-20'
                        },
                        regexp: {
                            regexp: /^[A-Za-z0-9\u4e00-\u9fa5_]+$/,
                            message: '昵称不合法(仅能为字母、数字、中文以及下划线)'
                        }
                    }
                },
                email: {
                    validators: {
                        notEmpty: {
                            message: '不能为空'
                        },
                        emailAddress: {
                            message: '邮箱格式不正确'
                        }
                    }
                },
                key: {
                    validators: {
                        regexp: {
                            regexp: /^[A-Za-z0-9]+$/,
                            message: '输入不合法'
                        }
                    }
                }
            }
        })
                .on('success.form.fv', function (e) {
                    e.preventDefault();

                    // Use Ajax to submit form data
                    showLoading('.modal-content', 'win8_linear');
                    $.ajax({
                        url: '/admin/register',
                        type: 'post',
                        data: $('#form-register').serialize(),
                        success: function (data) {
                            $('.modal-content').waitMe('hide');
                            alert('注册成功');
                            $('#registerModal').modal('hide');

                        },
                        error: function () {
                            $('.modal-content').waitMe('hide');
                            alert('注册失败');
                        }
                    });
                });
    });


</script>
</html>
